<template>
	<view class="publishtask" @click="isadd = false">
		<!-- 顶部导航 -->
		<diyNavBar value='发布任务' color='#FF6F30'></diyNavBar>
		<!-- 选择设备 -->
		<view class="equipment">
			<view class="title">支持设备</view>
			<view class="equipment-content">
				<view class="equipment-item" :class="submit.sbstatus == item.sbstatus?'equipmentHover':''"
					v-for="(item,index) in equipmentList" :key="index" @click="submit.sbstatus = item.sbstatus">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 任务详情 -->
		<view class="taskContent">
			<view class="taskItem taskItemhover">
				<text class="iconfont icon-essential"></text>
				<text>任务图片</text>
				<view class="image" v-if="submit.file">
					<image :src="$util.img(submit.file)" mode=""></image>
					<text class="iconfont icon-jiufuqianbaoicon08" @click="deletesFill"></text>
				</view>
				<view class="image imagebox" v-else @click="addFile">
					<text class="iconfont icon-tianjiatianchong"></text>
				</view>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>标题</text>
				<input type="text" v-model="submit.title" placeholder-class="placeholder" placeholder="请输入悬赏标题10字以内" />
			</view>
			<view class="taskItem taskItemhover2">
				<text class="iconfont icon-essential"></text>
				<text>限时</text>
				<input type="number" class="widthhover" v-model="submit.making_time" placeholder-class="placeholder"
					placeholder="请选择接单限时（超时释放名额）" />
				<text class="textTips">时</text>
			</view>
			<view class="taskItem taskItemhover2">
				<text class="iconfont icon-essential"></text>
				<text>审核</text>
				<input type="number" class="widthhover" v-model="submit.examine" placeholder-class="placeholder"
					placeholder="请选择审核时间" />
				<text class="textTips">天</text>
			</view>
			<view class="taskItem">
				<text>做单次数</text>
				<view class="radio">
					<view class="radio-item">
						<view class="radio-task" :class=" submit.zdstatus == 1?'radioHover':''"
							@click="submit.zdstatus = 1"></view>
						<text>每人一个</text>
					</view>
					<view class="radio-item">
						<view class="radio-task" :class=" submit.zdstatus == 2?'radioHover':''"
							@click="submit.zdstatus = 2"></view>
						<text>每日一次</text>
					</view>
					<view class="radio-item">
						<view class="radio-task" :class=" submit.zdstatus == 0?'radioHover':''"
							@click="submit.zdstatus = 0"></view>
						<text>否</text>
					</view>
				</view>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>开始时间</text>
				<view class="time">
					<uni-datetime-picker type="date" placeholder="请输入开始时间" v-model="submit.start_time"
						:clear-icon="false" :border="false" />
				</view>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>结束时间</text>
				<view class="time">
					<uni-datetime-picker type="date" placeholder="请输入结束时间" v-model="submit.end_time" :clear-icon="false"
						:border="false" />
				</view>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>标题一</text>
				<input type="text" v-model="submit.labelone" placeholder-class="placeholder" placeholder="请输入标题一" />
			</view>
<!-- 			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>标题二</text>
				<input type="text" v-model="submit.labeltwo" placeholder-class="placeholder" placeholder="请输入标题二" />
			</view> -->
			<view class="taskItem">
				<!-- <text class="iconfont icon-essential"></text> -->
				<text>信息描述</text>
				<input type="text" v-model="submit.tj_description" placeholder-class="placeholder"
					placeholder="请输入提交信息描述" />
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>任务说明</text>
			</view>
			<view class="taskItem-box">
				<textarea v-model="submit.task_context" placeholder-class="placeholder" placeholder="请输入任务备注" />
			</view>
			<!-- <view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>做单说明</text>
			</view>
			<view class="taskItem-box">
				<textarea v-model="submit.context" placeholder-class="placeholder" placeholder="请输入做单说明" />
			</view> -->
		</view>
		<!-- 收益 -->
		<view class="taskContent addstep" v-if="priceObj[0]">
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>悬赏单价</text>
				<input type="text" v-model="submit.price" placeholder-class="placeholder"
					:placeholder="'最低出价'+ priceObj[0].value + '元'" @input="priceComputed"/>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>悬赏次数</text>
				<input type="text" v-model="submit.stock" placeholder-class="placeholder"
					:placeholder="'最少' + priceObj[1].value + '单'" @input="priceComputed"/>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>预付赏金</text>
				<input type="text" v-model="yfprice" placeholder-class="placeholder" placeholder="单价x次数+单价x次数x手续费" disabled/>
			</view>
			<view class="taskItem">
				<text class="iconfont icon-essential"></text>
				<text>悬赏步骤</text>
				<view class="addprofit" @click.stop="isadd = true">
					添加步骤
					<text class="iconfont icon-xiala"></text>
					<view class="box" v-if="isadd">
						<view class="item" v-for="(item,index) in addsetp" :key="index" @click="select(item,index)">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 步骤 -->
		<view class="step" ref='setDemo' v-if="stepList.length">
			<block v-for="(item,index) in stepList" :key="index">
				<!-- 顶部标题 -->
				<view class="stepTitle">
					<text>{{index+1 + '.' + item.title}}</text>
					<view class="icon">
						<text class="iconfont icon-bianjisekuai" @click="openPopup(item,index)"></text>
						<text class="iconfont icon-shanchu" v-if="!item.deleteShow" @click="deletes(item,index)"></text>
					</view>
				</view>
				<!-- input -->
				<view class="stepLink" v-if="item.inputJudge">
					<view class="input-left">
						{{item.inputText}}
					</view>
					<text class="textMargin" v-if="item.open" @click="gotos(item)">打开链接</text>
					<text v-if="item.copy" @click="$util.copy(item.inputText)">复制链接</text>
				</view>
				<!-- 二维码 -->
				<view class="codeimg" v-if="item.imgJudge">
					<image v-for="(v,n) in item.img" :src="$util.img(v)" mode="widthFix"></image>
				</view>
				<!-- 视频 -->
				<view class="codeimg" v-if="item.videoJudge">
					<video :src="$util.setVideo(item.video)" :show-fullscreen-btn="false" :enable-play-gesture="true"></video>
				</view>
				<!-- textarea -->
				<view class="textareabox" v-if="!item.videoJudge">
					{{item.textarea}}
				</view>
			</block>
		</view>
		<!-- 协议 -->
		<view class="agreement">
			<view class="check" @click="agreementJudge = !agreementJudge"
				:style="agreementJudge?'background:rgb(22, 132, 252)':''">
				<text class="iconfont icon-gouxuan" v-if="agreementJudge"></text>
			</view>
			我已阅读并同意遵守<text class="colorhover" @click="gototext">《发布规则》</text>的全部内容
		</view>
		<!-- 提示 -->
		<view class="tips">
			<text class="title">发布提示</text>
			<view class="title line">1.本平台禁止发布黄、赌、毒及政策等一切法律禁止内容，如有违反将查封账号，不退还账户余额，敬请周知。</view>
		</view>
		<button class="determine" type="default" @click='btn'>确定</button>
		<!-- 修改弹窗 -->
		<diyStepPopup ref="diyStepPopup" @determine='determine'></diyStepPopup>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import diyStepPopup from '../../component/diy-steppopup/diy-steppopup.vue'
	import obj from './js/taskstep.js'
	export default {
		components: {
			diyNavBar,
			diyStepPopup
		},
		data() {
			return {
				// 设备列表
				equipmentList: [{
					name: '全部',
					sbstatus: 0
				}, {
					name: '安卓',
					sbstatus: 1
				}, {
					name: 'ios',
					sbstatus: 2
				}],
				//控制添加步骤是否出现
				isadd: false,
				// 最后提交的数据
				submit: {
					task_sort_id: 0, //任务类型
					file: '', //任务图片
					title: '', //任务标题
					sbstatus: 0, //判断选中那个设备
					zdstatus: 1, //做单次数选中
					examine: '', //审核时间
					making_time: '', //做单时长
					start_time: '', //开始时间
					end_time: '', //结束时间
					task_context: '', //任务说明
					price: '', //悬赏单价
					stock: '', //悬赏次数
					yfprice: '', //预付悬赏
					making_context: '', //做单步骤
					labelone: '', //标题一
					labeltwo: '', //标题二
					tj_description: '' //提交信息描述
				},
				priceObj: [], //最小金额
				//判断协议是否选中
				agreementJudge: false,
				//步骤内容
				stepList: [],
				//防止重复提交
				judgeIndex: false,
				//添加步骤的数据
				addsetp: [{
					title: '输入网址',
					type: 'addUrl'
				}, {
					title: '复制数据',
					type: 'addCopy'
				}, {
					title: '二维码',
					type: 'addCode'
				}, {
					title: '图文说明',
					type: 'addImageText'
				}, {
					title: '收集信息',
					type: 'addInformation'
				}, 
				// {
				// 	title: '验证图',
				// 	type: 'addVerification'
				// },
				{
					title: '视频',
					type: 'addVideo'
				},
				],
				//添加选中的数据
				selectIndex: 0,
				// 编辑的第几条数据
				editIndex: 0,
				//会员详情
				member:{}
			}
		},
		onLoad(option) {
			option.id ? this.submit.task_sort_id = option.id : '';
			this.getData();
		},
		computed:{
			yfprice:function(){
				let price = this.submit.price * this.submit.stock + this.submit.price * this.submit.stock * parseFloat(Number(this.member.task_fee)/100).toFixed(2);
				this.submit.yfprice = price;
				if(price == 0) return ''
				else return price
			}
		},
		methods: {
			priceComputed(){},
			//初始化数据
			getData() {
				this.$http.sendrequest('/index/Reward', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.priceObj = res.data;
					}
				})
				this.$http.sendrequest('/member/memberId', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.member = res.data;
					}
				})
				
				this.stepList.push(obj['addVerification'])
			},
			//添加步骤
			select(item, index) {
				let data = obj[item.type];
				this.selectIndex = index;
				this.$refs.diyStepPopup.open(JSON.stringify(data), 'add');
			},
			//弹窗打开
			openPopup(item, index) {
				this.editIndex = index;
				this.$refs.diyStepPopup.open(JSON.stringify(item), 'edit');
			},
			//添加了数据之后触发回调
			determine(content, type) {
				console.log("添加数据",content,type)
				switch (type) {
					case 'add':
						this.stepList.unshift(content); //添加步骤
						if(content.name != 'addImageText' && content.name != 'addVerification'){
							this.addsetp.splice(this.selectIndex,1);
							console.log("数据",this.selectIndex)
						}
						break;
					case 'edit':
						this.stepList[this.editIndex] = content;
						this.$forceUpdate();
						break;
				}
			},
			// 发布任务
			btn() {
				try {
					Object.keys(this.submit).forEach((item, index) => {
						if (this.submit[item] == "") {
							switch (item) {
								case 'file':
									throw '请选择任务图片';
									break;
								case 'title':
									throw '请填写任务标题';
									break;
								case 'making_time':
									throw '请填写任务时长';
									break;
								case 'examine':
									throw '请填写审核时长';
									break;
								case 'start_time':
									throw '请选择开始时间';
									break;
								case 'end_time':
									throw '请选择结束时间';
									break;
								case 'task_context':
									throw '请填写任务说明';
									break;
								case 'price':
									throw '请填写悬赏单价';
									break;
								case 'stock':
									throw '请填写悬赏次数';
									break;
								case 'yfprice':
									throw '请填写预付赏金';
									break;
								case 'labelone':
									throw '请填写标题一';
									break;
							}

						}
					})
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					return false
				}

				//步骤数据
				if (!this.stepList.length) {
					uni.showToast({
						title: '请选择步骤',
						icon: 'none'
					})
					return false
				}

				try {
					this.stepList.forEach(item => {
						switch (true) {
							case item.imgJudge:
								if(!item.img.length){
									switch(item.name){
										case 'addCode':
											throw '请选择二维码图片'
											break;
										case 'addImageText':
											throw '请选择图文说明图片'
											break;
										case 'addVerification':
											throw '请选择验证图图片'
									}
								}
								break;
							case item.inputJudge:
								if (!item.inputText){
									switch(item.name){
										case 'addUrl':
											throw '请输入网址内容'
											break;
										case 'addCopy':
											throw '请输入需要复制的内容'
											break;
									}
								}
								break;
						}
						if (item.img.length) {
							item.img.forEach((v, n) => {
								item.img[n] = this.$util.img(item.img[n]);
							})
						}
					})
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					return false
				}

				this.submit.making_context = JSON.stringify(this.stepList);
				if (!this.agreementJudge) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
					return false
				}

				if (this.judgeIndex) return true
				this.$http.sendrequest('/task/Addtask', this.submit, {
					tokenJudge: true
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						this.judgeIndex = true;
						setTimeout(() => {
							this.$util.redirectTo('/pages/tasklist/tasklist', {}, 'redirectTo')
						}, 1000)
					}
				})
			},
			//跳转链接
			gotos(item) {
				// #ifdef APP
				plus.runtime.openURL(item.inputText);
				// #endif
				// #ifdef H5
				location.href = item.inputText;
				// #endif
			},
			//添加任务图片
			addFile() {
				this.$util.selectImage({
					num: 1,
					success: res => {
						if (res.judge) {
							this.submit.file = this.$util.img(JSON.parse(res.data).data[0].filepath);
							console.log(this.submit.file)
							this.$forceUpdate()
						}
					}
				})
			},
			//删除任务图片
			deletesFill() {
				this.submit.file = '';
				this.$forceUpdate();
			},
			//删除步骤
			deletes(item, index) {
				let obj = {};
				switch (item.name) {
					case 'addUrl':
						obj = {
							title: '输入网址',
							type: 'addUrl'
						}
						break;
					case 'addCopy':
						obj = {
							title: '复制数据',
							type: 'addCopy'
						}
						break;
					case 'addCode':
						obj = {
							title: '二维码',
							type: 'addCode'
						}
						break;
					case 'addImageText':
						obj = {
							title: '图文说明',
							type: 'addImageText'
						}
						break;
					case 'addInformation':
						obj = {
							title: '收集信息',
							type: 'addInformation'
						}
						break;
					case 'addVerification':
						obj = {
							title: '验证图',
							type: 'addVerification'
						}
						break;
					case 'addVideo':
						obj = {
							title: '视频',
							type: 'addVideo'
						}
						break;
				}
				if(item.name != 'addImageText' && item.name != 'addVerification'){
					this.addsetp = this.addsetp.concat(obj);
				}
				this.stepList.splice(index, 1);
				uni.showToast({
					title: '清除成功',
					icon: 'none'
				})
			},
			gototext() {
				this.$util.redirectTo('/pages/agreement/agreement', {
					title: '发布规则',
					type: 'Fbgz'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './css/publishtask.scss';

	/deep/ .taskItem .time {
		font-weight: 500 !important;
	}

	.colorhover {
		color: #FF6F30;
	}

	/deep/ .uni-input-input {
		font-size: 28rpx !important;
		font-weight: 300;
	}
</style>
